<template>
  <el-card class="create">
    <div slot="header" class="title">创建任务</div>
    <div class="wrapper">
      <div class="block">
        <div class="title">基本设置</div>
        <el-form class="form" ref="basicForm" :model="basic" :rules="basicRules" label-width="80px">
          <el-form-item label="任务描述">
            <el-input v-model="basic.desc"/>
          </el-form-item>
          <el-form-item label="任务类型" prop="type">
            <el-select v-model="basic.type">
              <el-option label="训练" :value="0"/>
              <el-option label="选取攻击目标" :value="1"/>
              <el-option label="攻击" :value="2"/>
              <el-option label="防御" :value="3"/>
              <el-option label="评估" :value="4"/>
            </el-select>
          </el-form-item>
          <el-form-item label="选择模型" prop="name">
            <el-select v-model="basic.name">
              <el-option
                v-for="name in models"
                :key="name"
                :value="name"/>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <attack-defense-form
        v-show="basic.type == 2"
        class="block"
        ref="attackForm"
        typestr="攻击"/>
      <attack-defense-form
        v-show="basic.type == 3"
        class="block"
        ref="defenseForm"
        typestr="防御"/>
      <evaluation-form
        v-show="basic.type == 4"
        class="block"
        ref="evalForm"
        :queue="queue"
        :model="basic.name"/>
    </div>
    <div class="commands">
      <el-button @click="submit">创建任务</el-button>
    </div>
  </el-card>
</template>

<script>
import AttackDefenseForm from './AttackDefenseForm'
import EvaluationForm from './EvaluationForm'

export default {
  components: {
    AttackDefenseForm,
    EvaluationForm
  },
  props: {
    queue: Array
  },
  data() {
    return {
      models: [],
      basic: {
        desc: '',
        type: null,
        name: ''
      },
      basicRules: {
        type: [{ required: true, message: '请选择任务类型', trigger: 'change' }],
        name: [{ required: true, message: '请选择模型', trigger: 'change' }]
      }
    }
  },
  computed: {
    currentForm() {
      switch (this.basic.type) {
        case 2:
          return this.$refs.attackForm
        case 3:
          return this.$refs.defenseForm
        case 4:
          return this.$refs.evalForm
      }
    }
  },
  methods: {
    submit() {
      this.$refs.basicForm.validate().then(() => {
        if (this.currentForm) {
          return this.currentForm.validate()
        }
      }).then(() => {
        const obj = { ...this.basic }
        if (this.currentForm) {
          const ext = this.currentForm.submit()
          for (const key in ext) {
            obj[key] = ext[key]
          }
        }
        this.$emit('create', obj)
        this.basic.desc = ''
      }).catch(() => {})
    },
    loadTemplate(template) {
      this.models = template.models
      this.$refs.attackForm.loadTemplate(template.attacks)
      this.$refs.defenseForm.loadTemplate(template.defenses)
    },
    loadConfig(config) {
      this.basic.type = config.type
      this.basic.name = config.name
      this.basic.desc = config.desc
      if (this.currentForm) {
        this.currentForm.loadConfig(config)
      }
    },
    deleteQuest(id) {
      this.$refs.evalForm.deleteQuest(id)
    }
  }
}
</script>

<style scoped>
.wrapper {
  display: flex;
}

.block {
  flex: 1;
  padding: 10px 25px;
}

.block + .block {
  border-left: 1px solid #cccccc;
}

.form {
  margin-top: 20px;
}

.commands {
  margin-top: 20px;
  text-align: right;
}
</style>
